<!-- 我的发布 -->
<template>
    <div class="releaseSty">
        <div class="list flex_str_wrap">
            <div class="listItem" v-for="(item, index) in releaseList" :key="index" @click="goDetail(item.id)">
                <img :src="item.coverImageUrl" class="imgSty">
                <div class="itemNameSty">{{ item.requireTitle }}</div>
                <div class="flex_btn textSty">
                    <div>预算: <span class="priceSty">{{ item.generalBudget }}元</span></div>
                    <div>制图数: <span>1</span></div>
                </div>
            </div>
        </div>


        <div class="footerSty flex_cen">
            <el-pagination v-model:current-page="params.current" v-model:page-size="params.size"
                :page-sizes="[10, 20, 30, 50]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getAllRelease"
                @current-change="getAllRelease" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const total = ref(0)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const router = useRouter()
const releaseList = ref<any>([])
const params = reactive({
    // 需求类型
    requireType: 0,
    status: 0,
    requireTitle: '',
    orderBy: 0,
    current: 1,
    size: 10,
})
const goDetail = (id: number) => {
    router.push({ name: 'moneyDetail', path: '/money/detail', query: { id: id } })
}
const getAllRelease = () => {
}
onMounted(() => {
    getAllRelease()
})
</script>
<style scoped>
:deep(.is-active) {
    background-color: #FF9D07 !important;
}

.footerSty {
    margin-top: 60px;
}

.releaseSty {
    width: 80%;
    min-height: 500px;
    background-color: #fff;
}

.priceSty {
    color: red;
}

.itemNameSty {
    margin: 10px;
}

.textSty {
    width: 100%;
    padding: 10px;
}

.list {
    width: 100%;
}

.listItem {
    font-size: 20px;
    width: 22%;
    border: 1px solid #ccc;
    margin: 1.5%;
}

.imgSty {
    width: 100%;
    height: 200px;
}
</style>